<template>
    <div class="content">
        <div class="table-section">
            <table class="stock-table">
                <thead>
                <tr>
                    <th>名称/代码</th>
                    <th>业务</th>
                    <th @click="sortBy('buy_date')" style="cursor: pointer;">建仓时间
                        <span >
                        {{ sortStates.buy_date === 'asc' ? '▲' : '▼' }}
                        </span>
                    </th>
                    <th @click="sortBy('holding')" style="cursor: pointer;">股数/占比
                        <span >
                        {{ sortStates.holding === 'asc' ? '▲' : '▼' }}
                        </span>
                    </th>
                    <th @click="sortBy('max_loss')" style="cursor: pointer;">最大跌幅
                        <span >
                        {{ sortStates.max_loss === 'asc' ? '▲' : '▼' }}
                        </span>
                    </th>
                    <th @click="sortBy('cumulative')" style="cursor: pointer;">累计涨跌
                        <span >
                        {{ sortStates.cumulative === 'asc' ? '▲' : '▼' }}
                        </span>
                    </th>
                    <th @click="sortBy('max_agin')" style="cursor: pointer;">最大涨幅
                        <span >
                        {{ sortStates.max_agin === 'asc' ? '▲' : '▼' }}
                        </span>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr  class="tr-column" v-for="(stock, index) in paginatedStocks" :key="index">
                    <td>
                        <div class="stock-info">
                            <div class="stock-name">{{ stock.name }}</div>
                            <div class="stock-symbol">{{ stock.symbol }}</div>
                        </div>
                    </td>
                    <td>{{ stock.business }}</td>
                    <td>{{ stock.hold_days }}天<br><span class="smallFont">{{ stock.buy_date }}</span></td>
                    <td>{{ stock.num }}<br><span class="smallFont">{{ stock.holding }}</span></td>
                    <td :class="getRateClass(stock.max_loss)">{{ stock.max_loss }}%<br> <span class="smallFont">{{ stock.min_low }}</span></td>
                    <td :class="getRateClass(stock.cumulative)">{{ stock.cumulative }}%<br><span class="smallFont">{{
                            stock.latest_close
                        }}</span></td>
                    <td :class="getRateClass(stock.max_agin)">{{ stock.max_agin }}%<br><span class="smallFont">{{
                            stock.max_high
                        }}</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 分页组件 -->
    <div class="pagination">
        <div class="pagination-info">
            共 {{ stocks.length }} 条记录
        </div>

        <div class="pagination-controls">
            <button class="page-btn" :disabled="currentPage === 1" @click="prevPage">上一页</button>
            <div class="page-numbers">
                <button
                    v-for="page in totalPages"
                    :key="page"
                    class="page-number"
                    :class="{ active: currentPage === page }"
                    @click="goToPage(page)"
                >
                    {{ page }}
                </button>
            </div>
            <button class="page-btn" :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
        </div>

        <div class="pagination-size">
            每页显示:
            <select v-model="pageSize" @change="handlePageSizeChange">
                <option value="5">5条</option>
                <option value="10">10条</option>
                <option value="20">20条</option>
                <option value="50">50条</option>
            </select>
        </div>
    </div>
</template>

<script>
import {getRecordList} from "@/api/ChangeViewAPI";
export default {
    data() {
        return {
            // 原始股票数据
            stocks: [],
            // 分页配置
            currentPage: 1,
            pageSize: 10, // 每页显示的数据条数
            pageSizeOptions: [5, 10, 20, 50], // 可选的每页显示条数选项
            // 排序配置
            sortKey: null,
            sortStates: {
                buy_date: 'asc',
                holding: 'asc',
                max_loss: 'asc',
                cumulative: 'asc',
                max_agin: 'asc',
            },
        }
    },
    computed: {
        sortedStocks() {
            if (!this.sortKey) return this.stocks;

            const order = this.sortStates[this.sortKey];
            return [...this.stocks].sort((a, b) => {
                let valA = a[this.sortKey];
                let valB = b[this.sortKey];

                if (typeof valA === 'string' && valA.includes('%')) {
                    valA = parseFloat(valA);
                    valB = parseFloat(valB);
                }

                if (!isNaN(valA) && !isNaN(valB)) {
                    return order === 'asc' ? valA - valB : valB - valA;
                } else {
                    return order === 'asc'
                        ? String(valA).localeCompare(String(valB))
                        : String(valB).localeCompare(String(valA));
                }
            });
        },
        paginatedStocks() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.sortedStocks.slice(start, end);
        },
        totalPages() {
            return Math.ceil(this.sortedStocks.length / this.pageSize);
        },
    },
    created() {
        this.getList();
    },
    methods: {
        getRateClass(value) {
            // 去掉百分号并转换为数字
            const num = parseFloat(value);
            if (isNaN(num)) return ''; // 非数字不加样式

            return num < 0 ? 'negative' : 'positive';
        },
        getList() {
            getRecordList({
                type:0,ranking:4
            }).then(response => {
                this.stocks = response.data.data.items;

            });
        },
        sortBy(key) {
            // 如果再次点击同一列，就反转该列的排序方向
            this.sortStates[key] = this.sortStates[key] === 'asc' ? 'desc' : 'asc';
            this.sortKey = key;
            this.currentPage = 1; // 排序后回第一页
        },
        nextPage() {
            if (this.currentPage < this.totalPages) this.currentPage++;
        },
        prevPage() {
            if (this.currentPage > 1) this.currentPage--;
        },
        // 跳转到指定页
        goToPage(page) {
            this.currentPage = page
        },
        // 处理每页显示条数变化
        handlePageSizeChange() {
            // 当每页显示条数变化时，重置为第一页
            this.currentPage = 1
        }
    }
}

</script>

<style scoped>



.content {
    overflow-y: auto;
    position: fixed; /* 固定在屏幕 */
    width: 97%; /* 宽度占屏幕宽度的 30% */
    bottom: 180px;
    top: 110px;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-section {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 100%;
}

.stock-table {
    width: 100%;
    border-collapse: collapse;
}

.stock-table th {
    width: 14.28%;
    padding: 12px 8px;
    text-align: center;
    color: #1890ff;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fafafa;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.stock-table th:hover {
    background-color: #f0f0f0;
}
.tr-column:nth-child(odd){
    background-color: #f9f9f9;
}
.tr-column:hover{
    background-color: #f0f0f0;
}

.stock-table td {
    text-align: center;
    padding: 12px 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.stock-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stock-name {
    width: 100px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.stock-symbol {
    font-size: 12px;
    color: #999;
}


/* 分页组件样式 */
.pagination {
    position: fixed; /* 固定在屏幕 */
    width: 97%; /* 宽度占屏幕宽度的 30% */
    bottom: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination-info {
    color: #666;
    font-size: 14px;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination-size {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.pagination-size select {
    padding: 4px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
}

.pagination-size select:focus {
    outline: none;
    border-color: #1890ff;
}

.page-btn {
    padding: 8px 16px;
    margin: 0 8px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.page-btn:hover:not(:disabled) {
    color: #1890ff;
    border-color: #1890ff;
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-numbers {
    display: flex;
    align-items: center;
}

.page-number {
    width: 32px;
    height: 32px;
    margin: 0 4px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-number:hover {
    color: #1890ff;
    border-color: #1890ff;
}

.page-number.active {
    background-color: #1890ff;
    color: #fff;
    border-color: #1890ff;
}
.smallFont {
    color: #999999
}

.titleBlue {
    color: #1890ff;
}

@media (max-width: 480px) {
    .change-view {
        padding: 10px;
        padding-bottom: 80px;
    }

    .tabs {
        flex-wrap: wrap;
    }

    .tab {
        padding: 6px 12px;
        font-size: 13px;
    }

    .content {
        padding: 10px;
        border-radius: 4px;
    }

    .stock-table th,
    .stock-table td {
        padding: 8px 4px;
        font-size: 12px;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pagination-info,
    .pagination-size {
        font-size: 11px;
    }

    .pagination-controls {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .page-numbers {
        flex-wrap: wrap;
        justify-content: center;
        margin: 8px 0;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .content {
        padding: 15px;
        border-radius: 6px;
    }

    .stock-table th,
    .stock-table td {
        padding: 10px 6px;
        font-size: 14px;
    }

    .stock-symbol {
        font-size: 11px;
    }

    .pagination {
        padding: 12px 8px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .pagination-info,
    .pagination-size {
        font-size: 12px;
    }

    .pagination-controls {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .page-btn {
        padding: 6px 12px;
        margin: 0 4px;
        font-size: 12px;
    }

    .page-number {
        width: 28px;
        height: 28px;
        margin: 0 2px;
        font-size: 12px;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .content {
        padding: 15px;
        border-radius: 6px;
    }

    .stock-table th,
    .stock-table td {
        padding: 10px 6px;
        font-size: 14px;
    }

    .stock-symbol {
        font-size: 11px;
    }

    .pagination {
        padding: 12px 8px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .pagination-info,
    .pagination-size {
        font-size: 12px;
    }

    .pagination-controls {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .page-btn {
        padding: 6px 12px;
        margin: 0 4px;
        font-size: 12px;
    }

    .page-number {
        width: 28px;
        height: 28px;
        margin: 0 2px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .content {
        padding: 10px;
        border-radius: 4px;
    }

    .stock-table th,
    .stock-table td {
        padding: 8px 4px;
        font-size: 12px;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pagination-info,
    .pagination-size {
        font-size: 11px;
    }

    .pagination-controls {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .page-numbers {
        flex-wrap: wrap;
        justify-content: center;
        margin: 8px 0;
    }
}

.positive {
    color: red;
    font-weight: 500;
}

.negative {
    color: green;
    font-weight: 500;
}
</style>
